<template>
	<!-- 系统日志 -->
	<tab-module-container :show-page-tools="true">
		<template #Slot-Conf-Module-Header>
			<p class="system-logs-title font-20-bold">系统日志</p>
		</template>

		<template #Slot-Conf-Module-Tools-Left>
			<div style="display: flex" class="_logs">
				<global-input-search
					v-model:value="tableAttr.searchObj.search"
					placeholder="姓名/手机号"
					@search="setTableData(true)"
				></global-input-search>
				<div class="time-part">
					<ul class="select-list">
						<li
							:key="item.value"
							v-for="(item, index) in presetTime"
							class="select-list-item"
							:class="[activeTimeIndex === index && 'active']"
							@click="changeTime(index, item.value)"
						>
							{{ item.text }}
						</li>
					</ul>
					<a-range-picker
						format="YYYY-MM-DD HH:mm"
						class="range-picker"
						value-format="YYYY-MM-DD HH:mm"
						:value="[createBeginVal, createEndVal]"
						:class="[createBeginVal && createBeginVal && 'active']"
						style="width: 216px"
						show-time
						:placeholder="['开始日期', '结束日期']"
						input-read-only
						@change="changeRangePicker"
					>
						<!-- <template #suffixIcon> <ClockCircleOutlined /></template> -->
					</a-range-picker>
				</div>
			</div>
		</template>

		<template #Slot-Conf-Module-Tools-Right>
			<div class="_right">
				<div class="reset">
					<div style="display: flex; align-items: center" @click="reset">
						<p style="margin-left: 10px">重置</p>
						<global-svg-icon icon-name="reset" width="14px" height="14px"></global-svg-icon>
					</div>
				</div>
			</div>
		</template>

		<template #Slot-Conf-Module-Content>
			<div class="_table">
				<div>
					<global-table
						:data-source="tableAttr.data"
						:selected-row-keys="tableAttr.selectedKeys"
						:loading="tableAttr.loading"
						:columns="columns"
						:use-select="false"
						@sort="sort"
					>
						<template #operation="{ record }"> </template>
					</global-table>
				</div>
				<div>
					<global-pagination
						:current="tableAttr.current"
						:page-size="tableAttr.pageSize"
						:total="tableAttr.total"
						@change="setTablePagination"
					></global-pagination>
				</div>
			</div>
		</template>
	</tab-module-container>
</template>

<script setup lang="ts" name="system-logs-table">
import dayjs from 'dayjs';
import { g6UseTable } from 'glasssix-vue3-hooks';
import { SysLogsAPI } from '../../../api';
import { TabModuleContainer } from '../../../components/index';

const { tableAttr, setTableData, setTablePagination } = g6UseTable(SysLogsAPI.list);

/* ------------------- 处理时间选择逻辑 ------------------ */
// 时间过滤
const createBeginVal = ref<any>();
const createEndVal = ref<any>();

// 预设时间段
const presetTime = ref<any>([
	{ text: '今日', value: 1 },
	{ text: '近7天', value: 7 },
	{ text: '近30天', value: 30 }
]);

// 根据传入的天数，获取以当前时间基准的时间范围
const getTimes = (day: number): { startTime: string; endTime: string } => {
	const startTime = dayjs()
		.subtract(day - 1, 'days')
		.startOf('day')
		.format('YYYY-MM-DD HH:mm:ss');
	const endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');

	tableAttr.searchObj.startTime = startTime;
	tableAttr.searchObj.endTime = endTime;

	return { startTime, endTime };
};

const activeTimeIndex = ref<number>(0);
const changeRangePicker = (dates: any, date: string[]): void => {
	activeTimeIndex.value = -1;

	if (dates === null) {
		tableAttr.searchObj.startTime = '';
		tableAttr.searchObj.endTime = '';
	}
	if (date && date.length) {
		if (date[0] !== '') {
			tableAttr.searchObj.startTime = `${date[0]}:00`;
			createBeginVal.value = `${date[0]}`;
		}
		if (date[1] !== '') {
			tableAttr.searchObj.endTime = `${date[1]}:59`;
			createEndVal.value = `${date[1]}`;
		}
		if (date[0] === '' && date[1] === '') {
			activeTimeIndex.value = 0;
			tableAttr.searchObj.startTime = undefined;
			tableAttr.searchObj.endTime = undefined;
			createBeginVal.value = undefined;
			createEndVal.value = undefined;
		}

		tableAttr.current = 1;
		setTableData(true);
	}
};

const changeTime = (index: number, day: number): void => {
	// 如果是同一天不搜索
	if (index === activeTimeIndex.value) {
		return;
	}
	activeTimeIndex.value = index;
	createBeginVal.value = undefined;
	createEndVal.value = undefined;
	console.log(day);

	getTimes(day);
	setTableData(true);
};

const columns: TsGlobalType.TsTableColumn[] = [
	{ dataIndex: 'account', title: '手机号码', width: 180, ellipsis: true },
	{ dataIndex: 'operatePerson', title: '姓名', width: 180, ellipsis: true },
	{ dataIndex: 'ip', title: 'IP地址', width: 180, ellipsis: true },
	{ dataIndex: 'createTime', title: '时间', width: 210, ellipsis: true, sorter: true },
	{ dataIndex: 'operationWeb', title: '操作页面', width: 180, ellipsis: true },
	{ dataIndex: 'context', title: '操作内容', ellipsis: true }
];
// 重置
const reset = (): void => {
	activeTimeIndex.value = 0;
	tableAttr.searchObj = {};
	createBeginVal.value = '';
	createEndVal.value = '';
	getTimes(1);
	setTableData(true);
};
// 排序
const sort = (val: any): void => {
	tableAttr.searchObj.order = val.order;
	tableAttr.searchObj.columns = 'createTime';
	setTableData(true);
};
onMounted(() => {
	getTimes(1);
	setTableData();
});
</script>

<style lang="less">
._table {
	display: flex;
	height: calc(100vh - 76px - 44px - 160px);
	padding: 20px 0 0;
	flex-direction: column;
	justify-content: space-between;
}

.range-picker {
	width: 216px;
	flex-shrink: 0;

	&.active {
		width: 308px !important;
	}
}

._logs {
	gap: 12px;

	.ant-picker-input {
		input {
			color: @text02 !important;
		}

		.ant-picker-separator {
			color: @text03 !important;
		}
	}

	.anticon-swap-right {
		svg {
			color: @text02 !important;
		}
	}
}

.system-logs-title {
	color: rgba(240, 246, 252, 0.95);
}

.time-part {
	display: flex;

	.select-list {
		display: flex;
		// width: 280px;
		height: 36px;
		margin: 0 8px 0 0;
		border: 1px solid @mask02;
		border-radius: 6px;
		padding: 2px 0;
		font-size: 14px;
		line-height: 33px;
		color: @text02;
		flex-shrink: 0;

		.select-list-item {
			position: relative;
			margin: 0 6px;
			border-radius: 4px;
			padding: 0 16px;
			// line-height: 36px;
			cursor: pointer;

			&:hover {
				color: @text02;
				background: @mask03;
			}

			&.active {
				color: @text01;
				background: @primary01;
			}
			// 分割线
			&::after {
				position: absolute;
				top: 50%;
				right: -6px;
				width: 1px;
				height: 14px;
				background: @borderColor02;
				transform: translateY(-50%);
				content: '';
			}

			&:last-child {
				&::after {
					display: none;
				}
			}
		}
	}
}

._right {
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 8px;
	direction: rtl; // 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左， ltr 表示从左到右
	.reset {
		display: flex;
		flex-direction: column;
		justify-content: center;
		color: @text03;
		cursor: pointer;
	}

	button {
		margin-left: 16px;
	}
}
</style>
